import MyIcon from '@/components/MyIcon';
import { Card, Col, Divider, message, Row, Space, Tooltip } from 'antd';
import React, {
  useCallback,
  useMemo,
  useState,
} from 'react';
import cls from 'classnames';
import pageStyles from '@/common/pageLayout.less';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { downloadTemplate, getFileNameNotType, splitFileUrl } from '@/utils';
import {
  EyeOutlined,
  VerticalRightOutlined,
} from '@ant-design/icons';
import { AnnounceHomeRight } from './AnnounceHomeRight';

export const AnnounceHomeLeft: React.FC<AnnounceHomeAPI.IAnnounceHomeLeft> = ({
  announceInfoObj,
  prefixCls,
}) => {
  /**
   * 保存监听的滚动条高度
   */
  const [scrollHeight, setScrollHeight] = useState<number>(0);
  const scrollHeightCallback = useCallback(
    (height: number) => {
      setScrollHeight(height);
    },
    [scrollHeight],
  );

  /**
   * 回到顶部
   */
  const backToTopFunc = (nodeId: string) => {
    let anchorElement = document.getElementById(nodeId);
    if (anchorElement) {
      anchorElement?.scrollIntoView({ block: 'start', behavior: 'smooth' });
    }
  };

  /**
   * 处理文件显示
   */
  const fileList = useMemo(() => {
    let attachList: any[] = [];
    attachList = splitFileUrl(announceInfoObj?.attachUrl);
    return attachList;
  }, [announceInfoObj]);

  const [showRightDrawer, setShowRightDrawer] = useState<boolean>(false);

  // const [animationState, setAnimationState] = useState<boolean>(false)
  // const animateCallback = useCallback(() => {
  //   setAnimationState(true)
  //   setTimeout(() => {
  //     setAnimationState(false)
  //   }, 1000);
  // }, [animationState])

  /**
   * 监听 公告内容滚动
   * @param event
   */
  const monitorScrolling = (event: any) => {
    let { target } = event;
    if (target.scrollTop > document.body?.clientHeight * 0.6) {
      scrollHeightCallback(target?.scrollTop);
    }

    if (target?.scrollTop < document.body?.clientHeight * 0.6) {
      if (scrollHeight != 0) {
        scrollHeightCallback(0);
        setHoverBackTop(false);
      }
    }
  };

  /**
   * 监听鼠标是否移入移出
   * true 移入    false 移出
   */
  const [hoverBackTop, setHoverBackTop] = useState<boolean>(false);

  return (
    <>
      <div
        className={prefixCls + 'row-col-divBox'}
        style={{
          position: 'relative',
          overflow: 'hidden',
        }}
      >
        <Card
          title={'公告详情'}
          className={cls(
            pageStyles['page-view'],
            prefixCls + 'cardExtra',
            prefixCls + 'cardHead',
          )}
          bodyStyle={{ height: '90%', padding: '5px 0px' }}
          extra={
            announceInfoObj?.isTop == 1 ? (
              <div className={prefixCls + 'cardExtra-iconIsTop'}>
                <MyIcon type="icon-zhiding" />
              </div>
            ) : (
              <></>
            )
          }
        >
          <Row className={'cardBodyRow'}>
            <Col span={24} className={'cardBodyCol'}>
              <div className={prefixCls + 'announceDetail'}>
                <Row
                  style={{
                    padding: '0px 10px',
                    marginRight: 0,
                    marginLeft: 0,
                  }}
                  gutter={[10, 10]}
                >
                  <Col span={24}>
                    <div className={prefixCls + 'announceDetail-title'}>
                      {announceInfoObj?.announceTitle}
                    </div>
                  </Col>
                </Row>
                <Space
                  className={prefixCls + 'announceDetail-content'}
                  size={[10, 5]}
                  wrap={true}
                >
                  <span>
                    公示时间：
                    {announceInfoObj?.startTime?.split(' ')?.[0] ?? '--'}
                    &nbsp;~&nbsp;
                    {announceInfoObj?.endTime?.split(' ')?.[0] ?? '--'}
                  </span>
                  {announceInfoObj?.viewList?.length > 0 && (
                    <span>
                      &nbsp;&nbsp;
                      <a
                        onClick={() => {
                          setShowRightDrawer(true);
                        }}
                      >
                        <EyeOutlined />
                        &nbsp;&nbsp;
                        <span>{announceInfoObj?.viewList?.length}</span>
                      </a>
                    </span>
                  )}
                  {fileList && fileList?.length > 0 && (
                    <span>
                      &nbsp;&nbsp;
                      <a
                        onClick={() => {
                          backToTopFunc('announceHomeFile');
                          // animateCallback()
                        }}
                      >
                        <MyIcon type="icon-file-text-fill" />
                        相关附件
                      </a>
                    </span>
                  )}
                </Space>
                <Divider />
                <div
                  style={{ height: document.body.clientHeight * 0.6 }}
                  className={prefixCls + 'announceDetail-scrollBox'}
                >
                  <ScrollBarLayout
                    style={{
                      padding: '5px 20px',
                    }}
                    onScroll={monitorScrolling}
                  >
                    <Row id={'announceHomeScroll'}>
                      <Col span={24}>
                        <div
                          style={{ fontSize: '20px' }}
                          dangerouslySetInnerHTML={{
                            __html: announceInfoObj?.announceContent
                              ? announceInfoObj?.announceContent?.contentHtml
                              : '',
                          }}
                          className={pageStyles['editorStyle']}
                        />
                      </Col>
                      <Col span={24} id={'announceHomeFile'}>
                        {fileList && fileList.length > 0 && (
                          <div
                            style={{
                              padding: '10px 0px 0px',
                            }}
                          >
                            {fileList && fileList.length > 0 && (
                              <div
                                className={cls(
                                  prefixCls + 'fileListBox',
                                  // animationState ? prefixCls + 'fileAnimation' : ''
                                )}
                              >
                                <div
                                  className={
                                    prefixCls + 'fileListBox-labelText'
                                  }
                                >
                                  附件列表：
                                </div>
                                <Row
                                  className={prefixCls + 'fileListBox-row'}
                                  gutter={[10, 6]}
                                >
                                  <>
                                    {fileList.map((e: any, i: any) => {
                                      return (
                                        <Col span={4} key={i + 'fileList'}>
                                          <Tooltip title={e.attachName}>
                                            <a
                                              onClick={() => {
                                                message.success(
                                                  '下载中，请稍后...',
                                                );
                                                downloadTemplate(
                                                  '/announceController/downloadFile',
                                                  e.attachName,
                                                  e.attachUrl,
                                                  () => {},
                                                );
                                              }}
                                            >
                                              <MyIcon type="icon-file-text-fill" />
                                              &nbsp;
                                              {getFileNameNotType(
                                                e.attachName,
                                                6,
                                              )}
                                            </a>
                                          </Tooltip>
                                        </Col>
                                      );
                                    })}
                                  </>
                                </Row>
                              </div>
                            )}
                          </div>
                        )}
                      </Col>
                      <Col
                        span={24}
                        style={{
                          padding: '10px 0px 0px',
                          display: 'flex',
                          justifyContent: 'flex-end',
                        }}
                      >
                        <div>
                          <div style={{ fontSize: '18px' }}>
                            发布部门：
                            {(announceInfoObj &&
                              announceInfoObj?.signDepartmentName) ||
                              '--'}
                          </div>
                          <div style={{ fontSize: '18px' }}>
                            发布时间：
                            {(announceInfoObj && announceInfoObj?.signTime) ||
                              '--'}
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </ScrollBarLayout>
                </div>
              </div>
            </Col>
          </Row>
        </Card>

        <AnnounceHomeRight
          announceInfoObj={announceInfoObj}
          prefixCls={prefixCls}
          visible={showRightDrawer}
          onClose={() => {
            setShowRightDrawer(false);
          }}
        />

        {scrollHeight > document.body.clientHeight * 0.6 && (
          <>
            <div
              onMouseEnter={(e: any) => {
                e?.stopPropagation();
                setHoverBackTop(true);
              }}
              onMouseLeave={(e: any) => {
                e?.stopPropagation();
                setHoverBackTop(false);
              }}
              className={prefixCls + 'backTopStyle'}
              onClick={() => {
                backToTopFunc('announceHomeScroll');
              }}
            >
              <div className={prefixCls + 'backTopStyle-circleDiv'}>
                {hoverBackTop ? (
                  <>
                    <div>返回</div>
                    <div>顶部</div>
                  </>
                ) : (
                  <>
                    <VerticalRightOutlined />
                  </>
                )}
              </div>
            </div>
          </>
        )}
      </div>
    </>
  );
};
